<template>
    <div class="newslist">
        <myheader title="新闻列表" :back="true" :more="false"></myheader>
        <div class="card">
            <ul class="mui-table-view">
                <router-link tag="li" :to="'/home/newslist/newsinfo/'+item.id" class="mui-table-view-cell mui-media" v-for="item in newslist" :key="item.id">
                    <a href="javascript:;">
                        <img class="mui-media-object mui-pull-left" :src="item.img_url">
                        <div class="mui-media-body">
                            <p class='mui-ellipsis'>{{item.title}}</p>
                            <p class="subtitle">
                                <span>发表时间：{{item.add_time |dateFormat}}</span>
                                <span>点击次数：{{item.click}}</span>
                            </p>
                        </div>
                    </a>
                </router-link>
            </ul>
        </div>
    </div>
</template>

<script>
    import  myheader from '../../components/header'
    import {Toast}  from 'mint-ui'
    export default {
        name: "newslist",
        data(){
            return{
              newslist:[]
            }
        },
        components:{
            myheader
        },
        methods:{
            getNewsList(){
                this.$http.get('api/getnewslist').then(response=>{ //成功的回调
                    this.newslist = response.body.message
                },err=>{ //失败的回调
                    Toast('获取列表数据失败！')
                })
            }
        },
        created(){
            this.getNewsList()
        }
    }
</script>

<style scoped lang="scss">
    @import "../../assets/sassstyle";
.card{
    margin: 10px auto;
    padding: 5px;
    width: 95%;

    box-shadow: 0 0 9px rgba(0,0,0,.2);
    border-radius: 5px;
    .mui-table-view{
        .mui-table-view-cell,.mui-media{
            a{
                .mui-media-body{

                    .mui-ellipsis{
                        margin-bottom: 8px;
                        color: #000000;
                        font-weight: bold;
                    }
                    .subtitle{
                        color: $theme-color;
                        font-size: 10px;
                        display: flex;
                        justify-content: space-between;
                    }

                }
            }

        }
    }

}
</style>
